{extend name="public/pure"}

{block name="style"}
<title>用户登录</title>
<link rel="stylesheet" href="/home/css/verify/loginindex.css">
<link rel="stylesheet" href="/home/css/common/animate.min.css">
{/block}

{block name="body"}
<div>
    <div class="banner">
        <img src="/home/images/verify/logo.png">
    </div>
    <div class="input-phone">
        <input type="tel" placeholder="请输入手机号" maxlength="11" id="phone">
    </div>
    <div class="login">立即登录</div>
    <!--<a class="tourist" href="{:Url('Verify/tourist')}">游客登录</a>-->
    <img src="/home/images/verify/bottom.png" class="bottom">

<div class="mask"></div>
<div class="mask-content animated">
    <img src="/home/images/index/warning.png" class="mask-warning">
    <img src="/home/images/index/mask.png" class="mask-bg">
    <span class="mask-question">输入手机号!</span>
    <div class="mask-button-confirm">确定</div>
</div>
{/block}

{block name="script"}
<script>
    var oHeight = $(document).height();
    $(window).resize(function(){
        if($(document).height() < oHeight){
            $(".bottom").css("position","static");
        }else{
            $(".bottom").css("position","absolute");
        }
    });


$(".login").off().on("click",function(){
    var phone = $("#phone").val();
    if(phone==''){
        $(".mask").show();
        $(".mask-content").removeClass("bounceOut").addClass("fadeInDown").show();
    }else{
        $.ajax({
            type:"post",
            url: "{:Url('Verifyt/login')}",
            data:{
                phone:phone
            },
            success:function(data){
                if(data.code == 1){
                    window.location.href="/home/commodity/index";
                }else{
                  $(".mask-question").html(data.msg);
                    $(".mask").show();
                    $(".mask-content").removeClass("bounceOut").addClass("fadeInDown").show();
                }
            }
        })
    }
});

$(".mask-button-confirm").off().on("click",function(){
    $(".mask").hide();
    $(".mask-content").removeClass("bounceIn").addClass("bounceOut").hide();
});

</script>
{/block}